<template>
    <div class="vocalist">
        <ul class="m-cvrlst ">
            <li  v-for="(item , index) in vocalistData" :key="index">
                <div class="u-cover u-cover-5">
                    <a href="#">
                        <img :src="item.img1v1Url">
                        <span title="晚安君" class="msk"></span>
                    </a>
                </div>
                <p>
                    <a class="nm f-thide s-fc0" href="/artist?id=12084396" title="晚安君">
                     {{item.name}}
                    </a>
                    <a href="/user/home?id=271191991">
                    <i class="u-icn u-icn-5"></i>
                    </a>
                </p>
            </li>

        </ul>
    </div>
</template>

<script>
 import {searchResult} from "../../../network/search"
export default {
    props:["keywords"],
    data() {
        return {
            vocalistData:[]
        }
    },
    methods:{
         Result(keywords){
            searchResult(keywords,20, 0 ,100).then(res => {
              for(const item of res.data.result.artists){
                  this.vocalistData.push(item)
              }
          })
       },
    },
    created(){
        this.Result(this.keywords)
    },
    watch:{
       keywords(value){
           this.vocalistData = []
           this.Result(value)
       }
   }
}
</script>

<style scoped>
    .vocalist{width: 100%;margin-top: 20px;}
    .m-cvrlst{ margin: 0 0 0 -24px;width: 103%;min-height: 300px;}
    .m-cvrlst li{padding-left: 24px ;width: 144px; height: 154px;float: left;display: inline-block;overflow: hidden;line-height: 1.4;padding-bottom: 30px;}
    .u-cover{  position: relative;display: block;}
    .u-cover-5{width: 136px;height: 130px;}
    a{cursor: pointer;text-decoration: none; color: #333;}
    .u-cover img {display: block; width: 100%;height: 100%;}
    .u-cover .msk {position: absolute; top: 0; left: 0; width: 100%;  height: 100%;background-position: 0 -680px;background: url("../../../assets/imgs/coverall.png") no-repeat;}

    .m-cvrlst li p { margin-top: 8px; width: 100%}
    .m-cvrlst li .nm {  display: inline-block;  max-width: 85%; vertical-align: middle;}
    .f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
     } 
     .f-thide:hover{
         text-decoration: underline;
     }
   .u-icn-5 {
    width: 17px;
    height: 18px;
    margin-left: 72px;
    } 
    .u-icn{
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    background: url("../../../assets/imgs/icon.png") no-repeat;
    background-position: 0 -740px;
}
</style>